<template>
    <div class="tableContainer">
        <el-form :inline="true"  class="demo-form-inline" @submit.native.prevent>
            <el-form-item label="">
                <el-input class="elInput" v-model="key" placeholder="输入账号/操作"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="elBtn" type="primary" @click="selectData()">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" max-height="88%" border style="width: 100%" >
            <el-table-column type="index" min-width="3%" align="center"></el-table-column>
            <el-table-column prop="userName" label="用户账号" min-width="12%"  align="center" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="operation" label="用户操作" min-width="10%"  align="center" :show-overflow-tooltip="true" ></el-table-column>
            <el-table-column prop="method" label="请求方法"  min-width="20%" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="params" label="请求参数"  min-width="15%" align="center" :show-overflow-tooltip="true" > </el-table-column>
            <el-table-column prop="time" label="执行时长(毫秒)"  min-width="5%" align="center" :show-overflow-tooltip="true" > </el-table-column>
            <el-table-column prop="ip" label="IP地址"  min-width="10%" align="center" :show-overflow-tooltip="true" > </el-table-column>
            <el-table-column prop="createTime" label="访问时间"  min-width="15%" align="center" :show-overflow-tooltip="true" > </el-table-column>
        </el-table>
        <el-pagination background 
			layout="prev, pager, next, sizes, total, jumper"
			:page-sizes="pagesizes"
			:page-size="pagesize"
			:total="totalNum"
            @current-change="changePage"
            @size-change="sizeChange"
			>
		</el-pagination>

    </div>
</template>

<script>
export default {
    data() {
        return {
            pagesizes:[1,15,20,25],
            pagesize:1,// 每页条数
            currpage: 1, // 当前页
            totalNum:0, // 总条数
            key: '',// 查询参数
            tableData: [], // 页面数据
            formLabelWidth: '30%', // label宽度
            clientHeight:"", // 屏幕高度
      }
    },
    created(){
        // 获取屏幕高度
        this.clientHeight = this.$common.getClientHeight()
        this.pagesize = Math.ceil((this.clientHeight - 265)/55)
        this.pagesizes[0] = this.pagesize

        // 数据初始化
        this.selectData()
    },
    
    methods:{
        // 初始化数据
        selectData(){
            const params = {
                key:this.key,
                page:this.currpage,
                limit:this.pagesize,
            }
            this.$api.selectLogPage(params)
            .then(result => {
                var _this = this
                this.$common.filterLogin(result,_this,()=>{
                    // if(result.data.success){
                        console.log(result.data.data)
                        _this.tableData = result.data.data.rows
                        _this.totalNum = result.data.data.totalRows
                    // }
                    
                })
            })
        },
        // 分页--改变当前页
        changePage(index){
            this.currpage = index
            this.selectData()
        },
        // 分页--改变当前页显示条数
        sizeChange(page){
            this.pagesize = page
            this.selectData()
        }
    },
}
</script>

<style lang="scss" scoped>
.tableContainer{
    height: 96%;
    padding: 10px;
    background: #FDFDFD;
    border-radius: 5px;
    .el-pagination.is-background{
        text-align: right;
        padding:10px 5px;
    }
    .el-table,.el-table th, .el-table tr{
        background: transparent !important;
    }
}
</style>